<template>
    <div class="divAroundCenter">
        <el-form ref="addForm" :rules="formRules" :model="form" label-width="80px">
            <el-row :gutter="10">
                <el-col :span="12">
                    <!--<el-form-item label="应用图标">-->
                    <!--<el-input v-model="form.logoImage" size='small'></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="应用图标" prop="logoImage">
                        <el-upload
                                :data="paramData"
                                class="upload-demo"
                                ref="upload_add"
                                :action="uploadUrl"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                :file-list="fileList_logo"
                                :limit="1"
                                :on-exceed="handleExceed"
                                :auto-upload="false"
                                :on-success="uploadSuccess">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success"
                                       @click="submitUpload_add">上传到服务器
                            </el-button>
                            <!--<el-input v-model="form.logoImage" v-bind:value="form.logoImage" disabled></el-input>-->
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span=10>
                    <el-form-item label="应用名称" prop="appName">
                        <el-input v-model="form.appName" size='small'></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="10">
                <el-col :span=12>
                    <el-form-item label="应用分类" prop="appType">
                        <el-select v-model="form.appType" placeholder="请选择">
                            <el-option v-for="item in applicationTypeList" :key="item.classCode" :value="item.classCode"
                                       :label="item.className"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span=10>
                    <el-form-item label="开发商" prop="developer">
                        <el-select v-model="form.developer" placeholder="请选择" size='small'>
                            <el-option v-for="item in developerList" :key="item.supplierCode" :value="item.supplierCode"
                                       :label="item.supplierName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="系统应用" prop="isSystemApp">
                        <el-radio-group v-model="form.isSystemApp">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="应用类型" prop="classification">
                        <template>
                            <el-select v-model="form.classification" placeholder="请选择应用类型" clearable filterable>
                                <el-option
                                        v-for="item in appClassificationList"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <!--<el-radio-group v-model="form.classification">-->
                        <!--<el-radio label="I类应用" value="1"></el-radio>-->
                        <!--<el-radio label="II类应用" value="1"></el-radio>-->
                        <!--<el-radio label="III类应用" value="1"></el-radio>-->
                        <!--</el-radio-group>-->
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="部署网段" prop="network">
                        <!--<el-radio-group v-model="radio2">-->
                        <!--<div v-for="o in 3" :key="o" class="text item">-->
                        <!--<el-radio :label="o">{{'备选项' + o }}</el-radio>-->
                        <!--</div>-->
                        <!--</el-radio-group>-->

                        <el-radio-group v-model="form.network">
                            <el-radio label="1">移动互联网</el-radio>
                            <el-radio label="2">移动信息网</el-radio>
                            <el-radio label="3">公安信息网</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span='18' prop="describe">
                    <el-form-item label="功能介绍" placeholder="请简单描述应用的功能，内容不超过100字。">
                        <el-input type="textarea" v-model="form.describe" placeholder="请简单描述应用的功能，内容不超过100字。">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span='18'>
                    <el-form-item label="上传版本" prop="tempVersioin">  <!-- label-width='100px'-->
                        <el-tabs type="border-card">
                            <el-tab-pane label="Android">
                                <el-row>
                                    <el-col>
                                        <el-form-item label="版本号 " prop="androidVersionversion">
                                            <!--初始版本-->
                                            <el-input v-model="form.androidVersion.version" size='small'
                                                      placeholder="请输入应用访问的URL地址"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col>
                                        <el-form-item label="上传程序包" label-width='100px' prop="androidVersioninstallPackageUrl">
                                            <!--<el-button type="primary" size='small'>选择文件</el-button>-->
                                            <!--请选择需要上传的程序包，大小不超过10M-->

                                            <el-upload
                                                    :data="paramData"
                                                    class="upload-demo"
                                                    ref="upload_android"
                                                    :action="uploadUrl"
                                                    :on-remove="handleRemove_android"
                                                    :before-remove="beforeRemove_android"
                                                    :before-upload="beforeUpload_android"
                                                    :file-list="fileList_android"
                                                    :limit="1"
                                                    :on-exceed="handleExceed_android"
                                                    :auto-upload="false"
                                                    :on-success="uploadSuccess_android">
                                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                                <el-button style="margin-left: 10px;" size="small" type="success"
                                                           @click="submitUpload_android">上传到服务器
                                                </el-button>
                                                <div class="packgeTip" slot="tip">请选择需要上传的程序包，大小不超过10M</div>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sapn='9'>
                                        <el-form-item label="URL地址" prop="androidVersionaccessUrl">
                                            <el-input v-model="form.androidVersion.accessUrl" size='small'
                                                      placeholder="请输入应用访问的URL地址"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="iOS">
                                <el-row>
                                    <el-col>
                                        <el-form-item label="版本号 " prop="iosVersionversion">
                                            <!--初始版本-->
                                            <el-input v-model="form.iosVersion.version" size='small'
                                                      placeholder="请输入应用访问的URL地址"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col>
                                        <el-form-item label="上传程序包" label-width='100px' prop="iosVersioninstallPackageUrl">
                                            <!--<el-button type="primary" size='small'>选择文件</el-button>-->
                                            <!--请选择需要上传的程序包，大小不超过10M-->

                                            <el-upload
                                                    :data="paramData"
                                                    class="upload-demo"
                                                    ref="upload_ios"
                                                    :action="uploadUrl"
                                                    :on-remove="handleRemove_ios"
                                                    :before-remove="beforeRemove_ios"
                                                    :before-upload="beforeUpload_ios"
                                                    :file-list="fileList_ios"
                                                    :limit="1"
                                                    :on-exceed="handleExceed_ios"
                                                    :auto-upload="false"
                                                    :on-success="uploadSuccess_ios">
                                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                                <el-button style="margin-left: 10px;" size="small" type="success"
                                                           @click="submitUpload_ios">上传到服务器
                                                </el-button>
                                                <div class="packgeTip" slot="tip">请选择需要上传的程序包，大小不超过10M</div>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sapn='9'>
                                        <el-form-item label="URL地址" prop="iosVersionaccessUrl">
                                            <el-input v-model="form.iosVersion.accessUrl" size='small'
                                                      placeholder="请输入应用访问的URL地址"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="Web">
                                <el-row>
                                    <el-col>
                                        <el-form-item label="版本号 " prop="webVersionversion">
                                            <!--初始版本-->
                                            <el-input v-model="form.webVersion.version" size='small'
                                                      placeholder="请输入应用访问的URL地址"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <!--<el-col>-->
                                    <!--<el-form-item label="上传程序包" label-width='100px'>-->
                                    <!--&lt;!&ndash;<el-button type="primary" size='small'>选择文件</el-button>&ndash;&gt;-->
                                    <!--&lt;!&ndash;请选择需要上传的程序包，大小不超过10M&ndash;&gt;-->

                                    <!--<el-upload-->
                                    <!--:data="paramData"-->
                                    <!--class="upload-demo"-->
                                    <!--ref="upload_web"-->
                                    <!--:action="uploadUrl"-->
                                    <!--:on-remove="handleRemove_web"-->
                                    <!--:before-remove="beforeRemove_web"-->
                                    <!--:before-upload="beforeUpload_web"-->
                                    <!--:file-list="fileList_web"-->
                                    <!--:limit="1"-->
                                    <!--:on-exceed="handleExceed_web"-->
                                    <!--:auto-upload="false"-->
                                    <!--:on-success="uploadSuccess_web">-->
                                    <!--<el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
                                    <!--<el-button style="margin-left: 10px;" size="small" type="success"-->
                                    <!--@click="submitUpload_web">上传到服务器-->
                                    <!--</el-button>-->
                                    <!--<div class="packgeTip" slot="tip">请选择需要上传的程序包，大小不超过10M</div>-->
                                    <!--</el-upload>-->
                                    <!--</el-form-item>-->
                                    <!--</el-col>-->
                                    <el-col :sapn='9'>
                                        <el-form-item label="URL地址" prop="webVersionaccessUrl">
                                            <el-input v-model="form.webVersion.accessUrl" size='small'
                                                      placeholder="请输入应用访问的URL地址"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span='12' class="floatRight">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button type="primary" @click="onSubmit">下一步</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>

    import utils from '@/views/api/utils.js';
    import {addApp, getApplicationTypeList, getSupplierList,publishMarketList,getMarketList } from '@/views/api/api.js';


    export default {
        props: {toPublishAppData: ""}, // 用来接收父组件传给子组件的数据
        data() {
            return {
                form: {
                    logoImage: '',
                    appName: '',
                    appType: '1',
                    // applicationType:{className:''},
                    developer: '',
                    isSystemApp: '0',
                    classification: "3",
                    network: "3",
                    describe: "",
                    appCode: "",// 待保存后返回

                    androidVersion: {installPackageUrl: '', accessUrl: '', versionType: 3,version:"初始版本"},//版本类型 1：web,2:ios3:android
                    iosVersion: {installPackageUrl: '', accessUrl: '', versionType: 2,version:"初始版本"},
                    webVersion: {installPackageUrl: '', accessUrl: '', versionType: 1,version:"初始版本"},

                },

                formRules: { // 新增界面校验规则
                    appName: [
                        {required: true, message: '请输入应用名称', trigger: 'blur'}
                    ],
                    appType: [
                        {required: true, message: '请输选择应用分类', trigger: 'blur'}
                    ],
                    isSystemApp: [
                        {required: true, message: '请输选择是否是系统应用', trigger: 'blur'}
                    ],
                    classification: [
                        {required: true, message: '请输选择应用类型', trigger: 'blur'}
                    ],
                    developer: [
                        {required: true, message: '请输选择开发商', trigger: 'blur'}
                    ],
                    tempVersioin:[
                        {required: true, message: '请初始化至少一个版本',validator(rule, value, callback, source, options) {
                                var errors = [];

                                callback(errors)// 这局不写会不执行
                            }, trigger: 'blur'},
                        // { trigger: 'blur'},
                    ],
                },
                tempVersioin:null,// 作用:标识是否填写了版本信息

                // 预加载数据 start
                applicationTypeList: "",// app类型对象列表
                developerList: [],// 加载开发商列表
                appClassificationList: [{}],// 几类应用 列表
                // 预加载数据 end

                // 选择文件相关 start
                fileList_logo: [],
                fileList_android: [],
                fileList_ios: [],
                fileList_web: [],
                paramData: {sys: 1, module: 3, keyId: ""},
                fileUrl: '0',
                uploadUrl: '',
                // 现在文件相关 end


                isSubmintSuccess: false,// 页面是否提交过


            }
        },
        methods: {
            onSubmit() {
                if((this.form.androidVersion&&(this.form.androidVersion.installPackageUrl||this.form.androidVersion.accessUrl))
                    ||(this.form.iosVersion&&(this.form.iosVersion.installPackageUrl||this.form.iosVersion.accessUrl))
                    ||(this.form.webVersion&&this.form.webVersion.accessUrl)){
                    this.tempVersioin="ok";
                }else{
                    this.$message.error(" 请至少初始化一个版本!!! ");
                    return;
                }
                this.$refs["addForm"].validate((valid) => {
                    if (valid) {
                        console.log("app基础信息，校验通过")
                        if (!this.isSubmintSuccess) {
                            this.form.createDate=null;
                            addApp(this.form).then(function (result) {
                                if (result.code = "S100101" && result.data.appCode) {
                                    console.log(result);
                                    console.log(' add app succsee!');
                                    this.form.appCode = result.data.appCode;
                                    console.log("appCode:" + this.form.appCode);
                                    this.isSubmintSuccess = true;
                                    this.$emit('goToSelect', this.toPublishAppData); //主动触发upup方法，'vary'为向父组件传递的数据
                                } else {
                                    console.log("app基础信息，保存失败");
                                    console.log(result);
                                    this.$message.error('app基础信息保存失败 ');
                                }
                            }.bind(this)).catch(function (error) {
                                console.log("app基础信息，保存失败 异常");
                                console.log(error);
                                this.$message.error('app基础信息保存失败 ' + result.msg);
                            }.bind(this));
                        } else {// 提交过的
                            console.log("基础信息无需重复提交，直接跳转")
                            this.$emit('goToSelect', this.toPublishAppData); //主动触发upup方法，'vary'为向父组件传递的数据
                        }
                    } else {
                        console.log("app基础信息，校验不通过！！！")
                        console.log(this.form)
                    }
                    // todo  以下为测试用逻辑
                    // this.$emit('goToSelect', this.form); //主动触发upup方法，'vary'为向父组件传递的数据
                });
            },
            // 初始化app类型 start
            loadAppTypeObjlist() {
                console.log("初始化app类型 start")
                let params = {className: '', pageSize: 999999};
                getApplicationTypeList(params).then(function (result) {
                    console.log(result)
                    this.applicationTypeList = result.data.list;
                }.bind(this)).catch(function (error) {
                    console.log(error);
                }.bind(this));

            },
            //初始化开发商列表
            getDeveloperList() {
                this.listLoading = true;
                //NProgress.start();
                getSupplierList({pageSize: 999999}).then(function (result) {
                    console.log("init devList ")
                    this.developerList = result.data.list;
                    console.log(this.developerList)
                }.bind(this)).catch(function (error) {
                    console.log(error);
                }.bind(this));
            },

            // 选择logo文件相关_add start
            submitUpload_add() {
                this.paramData.keyId = "9999999999999999999999";
                this.$refs.upload_add.submit();
            },
            handleRemove(file, fileList) {
                console.log("移除文件");
                console.log(file, fileList);
                this.fileUrl = '';
                this.form.logoImage = '';
                console.log(this.fileUrl)
                console.log(this.form.logoImage)
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handlePreview(file) {
                console.log("点击文件");
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            uploadSuccess(response, file, fileList) {
                if (utils.isNotEmpty(response) && response.code == "S100101") {
                    this.fileUrl = response.data.fileUri;
                    this.form.logoImage = this.fileUrl;
                    console.log(response)
                    console.log(this.fileUrl)
                    console.log(this.form.logoImage)
                }else{
                    console.log(response)
                    this.$message.error('上传失败 ');
                    this.$refs.upload_add.clearFiles();
                }
            },
            // 选项logo文件相关_add end

            // 选择android文件相关_add start
            submitUpload_android() {
                this.paramData.keyId = "9999999999999999999999android";
                this.$refs.upload_android.submit();
            },
            handleRemove_android(file, fileList) {
                console.log("移除文件");
                console.log(file, fileList);
                this.form.logoImage = '';
                console.log(this.fileUrl)
                console.log(this.form.logoImage)
            },
            beforeRemove_android(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            beforeUpload_android(file) {
                // const isJPG = file.type === 'apk';
                // if (!isJPG) {
                //     this.$message.error('上传文件只能是 apk 格式!');
                // }
                const isLtSize = file.size / 1024 / 1024 < 10;
                if (!isLtSize) {
                    this.$message.error('上传文件大小不能超过 10MB!');
                }
                return isLtSize;
            },
            handlePreview_android(file) {
                console.log("点击文件");
                console.log(file);
            },
            handleExceed_android(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove_android(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            uploadSuccess_android(response, file, fileList) {
                if (utils.isNotEmpty(response) && response.code == "S100101") {
                    this.form.androidVersion.installPackageUrl = response.data.fileUri;
                    console.log(response)
                    console.log(this.form.androidVersion.installPackageUrl)
                }else{
                    console.log(response)
                    this.$message.error('上传失败 ');
                    this.$refs.upload_android.clearFiles();
                }
            },
            // 选项android文件相关_add end

            // 选择ios文件相关_add start
            submitUpload_ios() {
                this.paramData.keyId = "9999999999999999999999ios";
                this.$refs.upload_ios.submit();
            },
            handleRemove_ios(file, fileList) {
                console.log("移除文件");
                console.log(file, fileList);
                this.form.iosVersion.installPackageUrl = '';
            },
            beforeRemove_ios(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            beforeUpload_ios(file) {
                // const isJPG = file.type === 'ipa';
                // if (!isJPG) {
                //     this.$message.error('上传文件只能是 ipa 格式!');
                // }
                const isLtSize = file.size / 1024 / 1024 < 10;
                if (!isLtSize) {
                    this.$message.error('上传文件大小不能超过 10MB!');
                }
                return isLtSize;
            },
            handlePreview_ios(file) {
                console.log("点击文件");
                console.log(file);
            },
            handleExceed_ios(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove_ios(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            uploadSuccess_ios(response, file, fileList) {
                if(utils.isNotEmpty(response)&&response.code=="S100101") {
                    this.form.iosVersion.installPackageUrl = response.data.fileUri;
                    console.log(response)
                    console.log(this.form.iosVersion.installPackageUrl)
                }else{
                    console.log(response)
                    this.$message.error('上传失败 ');
                    this.$refs.upload_ios.clearFiles();
                }
            },
            // 选项ios文件相关_add end

            // 选择web文件相关_add start
            submitUpload_web() {
                this.paramData.keyId = "9999999999999999999999web";
                this.$refs.upload_web.submit();
            },
            handleRemove_web(file, fileList) {
                console.log("移除文件");
                console.log(file, fileList);
                this.form.webVersion.installPackageUrl = ""
            },
            beforeRemove_web(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            beforeUpload_web(file) {
                // const isJPG = file.type === 'image/jpeg';
                // if (!isJPG) {
                //     this.$message.error('上传文件只能是 JPG 格式!');
                // }
                const isLtSize = file.size / 1024 / 1024 < 10;
                if (!isLtSize) {
                    this.$message.error('上传文件大小不能超过 10MB!');
                }
                return isLtSize;
            },
            handlePreview_web(file) {
                console.log("点击文件");
                console.log(file);
            },
            handleExceed_web(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove_web(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            uploadSuccess_web(response, file, fileList) {
                if(utils.isNotEmpty(response)&&response.code=="S100101") {
                    this.form.webVersion.installPackageUrl = response.data.fileUri;
                    console.log(response)
                    console.log(this.form.webVersion.installPackageUrl)
                }else{
                    console.log(response)
                    this.$message.error('上传失败 ');
                    this.$refs.upload_web.clearFiles();
                }
            },
            //获取市场列表
            getMarketList() {
                getMarketList({pageSize: 999999,coverageRange:1}).then(function (result) {
                    console.log(result)
                    this.toPublishAppData.marketList = result.data.list;// 为下一页预备数据

                }.bind(this)).catch(function (error) {
                    console.log(error);
                }.bind(this));
            },
            // 选项web文件相关_add end
        },
        mounted() {

            console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
            console.log(this.toPublishAppData)
            this.uploadUrl = utils.uploadUrl(); //设置图片上传地址
            console.log(this.uploadUrl)
            if (utils.isNotEmpty(this.toPublishAppData)&&utils.isNotEmpty(this.toPublishAppData.toPublishAppObj)&&utils.isNotEmpty(this.toPublishAppData.toPublishAppObj.appCode)) {
                console.log("接受到将要发布的对象：")
                console.log(this.toPublishAppData)
                this.form = this.toPublishAppData.toPublishAppObj;
                this.developerList = this.toPublishAppData.developerList
                this.applicationTypeList = this.toPublishAppData.applicationTypeList
                this.appClassificationList = this.toPublishAppData.appClassificationList
                // this.isSubmintSuccess = true;
            }else{// 异常，没接受到父页面传过来的数据，为了显示好看，还是初始化数据
                this.loadAppTypeObjlist();
                this.getDeveloperList();
                this.appClassificationList = utils.getDictDatasByType("app_classification");// 应用所在区域 列表
            }

            this.getMarketList();// 为下一页预备数据
        }
    }
</script>

<style scoped>
    .right {
        text-align: right;
    }

    .floatRight {
        float: right;
    }

    .divAroundCenter {
        padding: 20px 50px;
        width: 100%;
        height: 100%;
    }
</style>
